<script lang="ts" setup>
const props = defineProps<{
  type: string
  thumbnail: string
  itemName: string
  soldQuantity: number
  reviewedQuantity: number
  price: string
  title: string
  summary: string
  photo: string
  name: string
  position: string
}>()
</script>
<template>
  <div
    v-if="props.type === 'A'"
    class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200"
  >
    <figure>
      <img :src="props.thumbnail" alt="card image" class="aspect-video w-full" />
    </figure>
    <div class="p-6">
      <header class="mb-4">
        <h3 class="text-xl font-medium text-slate-700">{{ props.itemName }}</h3>
        <p class="text-gray-400 text-sm">{{ props.price }}</p>
      </header>
      <p>
        Sold:
        <span
          class="inline-flex items-center justify-center gap-1 rounded-full bg-violet-500 px-1.5 text-sm text-white"
        >
          {{ props.soldQuantity }}
        </span>
      </p>
      <p>Reviewed: {{ props.reviewedQuantity }}</p>
    </div>
  </div>
  <div
    v-else-if="props.type === 'B'"
    class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200"
  >
    <div class="p-6">
      <header class="mb-4">
        <h3 class="text-xl font-medium text-slate-700">{{ props.itemName }}</h3>
      </header>
      <p>
        {{ props.summary }}
      </p>
    </div>
  </div>
  <div
    v-if="props.type === 'C'"
    class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200"
  >
    <figure>
      <img :src="props.thumbnail" alt="card image" class="aspect-video w-full" />
    </figure>
    <div class="p-6">
      <header class="mb-4">
        <h3 class="text-xl font-medium text-slate-700">{{ props.itemName }}</h3>
        <p class="text-gray-400 text-sm">{{ props.position }}</p>
      </header>
    </div>
  </div>
</template>
